<template>
    <el-container style="background-color:honeydew;height: 600px">
        <el-header>
            <span class="title" style="align-content: center;">汪汪羊电商管理员中心</span>
        </el-header>
        <el-container>
            <el-main>
                <el-card>
                    <div class="left">
                        <el-image :src="`http://127.0.0.1:8081/avatar/${geForm.avatar}`" style="height: 200px;width: 200px;"/>
                    </div>
                    <div class="right">
                        <div class="rleft">
                            <div style="margin-top: 20px">
                                <el-text >昵称：{{geForm.username}}</el-text>
                            </div>
                            <div style="margin-top: 20px">
                                <el-text >邮箱：{{geForm.email}}</el-text>
                            </div>
                            <div style="margin-top: 20px">
                                <el-text >电话：{{geForm.telephone}}</el-text>
                            </div>
                            <div style="margin-top: 20px">
                                <el-text >生日：{{geForm.dob}}</el-text>
                            </div>
                        </div>
                        <div class="rright">
                            <div>
                                <el-button @click="queryById1(user.uid)">编辑</el-button>
                            </div>
                        </div>
                    </div>
                </el-card>

                <el-dialog v-model="edit" title="修改个人信息">
                    <el-form :model="editForm" label-width="60">
                        <el-form-item label="昵称">
                            <el-input v-model="editForm.username" placeholder="title"/>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input v-model="editForm.email" placeholder="subtitle"/>
                        </el-form-item>
                        <el-form-item label="头像">
                            <el-upload
                                v-model:file-list="editfileList"
                                :auto-upload="false"
                                :limit="1">
                                <el-button type="primary">更改头像</el-button>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input v-model="editForm.telephone" placeholder="price"/>
                        </el-form-item>
                        <el-form-item label="生日">
                            <el-input v-model="editForm.dob" placeholder="description"/>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="edit = false">取消</el-button>
                                <el-button type="primary" @click="modify">
                                    保存
                                </el-button>
                        </span>
                    </template>
                </el-dialog>
            </el-main>
        </el-container>

    </el-container>

</template>

<script setup>
import {onMounted, ref,reactive,toRaw} from 'vue'
import { useRoute } from 'vue-router';
import userApi from '../../api/user.js'
import productApi from "../../api/product.js";
import {ElMessage} from "element-plus";

onMounted(() => {
    queryById()
})
const route = useRoute()
let uid = route.query.uid
let geForm = reactive({
    username:'',
    email:'',
    telephone:'',
    avatar:'',
    dob:''
})
let user = reactive({
    uid:uid
})
const queryById = async() =>{
    const res = await userApi.queryById({uid:uid})
    geForm.username = res.data.username
    geForm.email = res.data.email
    geForm.telephone = res.data.telephone
    geForm.avatar = res.data.avatar
    geForm.dob = res.data.dob
}

const edit = ref(false)
const editForm = reactive({
    uid:'',
    username:'',
    email:'',
    telephone:'',
    avatar:'',
    file:'',
    dob:''
})
const queryById1 = async(uid) =>{
    const res = await userApi.queryById({uid:uid})
    editForm.uid = res.data.uid
    editForm.username = res.data.username
    editForm.email = res.data.email
    editForm.telephone = res.data.telephone
    editForm.avatar = res.data.avatar
    editForm.file = res.data.file
    editForm.dob = res.data.dob
    edit.value = true
}
const editFileList = ref([])
const type = {type: 'application/json'};
const modify = async () => {
    editForm.files = editFileList
    if (toRaw(editForm.files).length !== 0) {
        editForm.file = editForm.files[0].raw;
    } else {
        editForm.file = null
    }
    console.log(editForm.file)
    editForm.user = new Blob([JSON.stringify(toRaw(editForm))], type);
    edit.value = false
    const res = await userApi.modify(editForm)
    if (res.data) {
        ElMessage.success('编辑成功')
        queryById()
    } else {
        ElMessage.error('编辑失败');
    }
}


</script>

<style scoped>

.icon{
    color: orangered;
    margin-top: 50px;
}

.el-header,
.el-footer {
    background: rgba(33, 33, 33, .8);
    color: #f9f9f9;
    text-align: center;
    line-height: 60px;
}
.el-main {
    background-color: #e9eef3;
    color: var(--el-text-color-primary);
}

body > .el-container {
    margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
.left{
    float: left;
    height: 250px;
    margin-left: 100px;
}
.right {
    width: 800px;
    margin-left: 400px;
}
.el-text{
    margin-top: 10px;
}

.rleft{
    float: left;
    height: 250px;
}
.rright{
    float: left;
    margin-left: 100px;
}
</style>